<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="cache-control" content="no-cache" />
    <title>设备列表</title>
    <link rel="stylesheet" href="../../assets/less/base/main.css" />
    <link rel="stylesheet" href="../../assets/less/keyDevice/index.css" />
</head>

<body>
    <div id="app">
        <div class="iot-key-device" :style="{'height': height}">
            <div class="page-title">设备列表</div>
            <div class="page-title-extra" @click="handleMore()">更多</div>
            <div class="page-list">
                <template v-if="util.isNotEmpty(deviceList)">
                    <div class="device-box" :style="{ height: boxHeight + 'px' }" v-for="(item,index) in deviceList" :key="index">
                        <div class="device-header">
                            <div class="device-title-badge device-title-badge-red"></div>
                            <span class="device-title">{{item.name}}</span>
                            <el-tooltip content="点击定位到设备" placement="top">
                                <img src="../../assets/images//more.png" class="device-title-extra" @click="handleAction(item.id)" />
                            </el-tooltip>
                        </div>
                        <div class="device-content" :style="{ width: util.isNotEmpty(item.starCmds) ? 'calc(75% - 24px)' : 'calc(100% - 24px)', height: boxHeight === 110 ? 'calc(100% - 40px)' : 'calc(100% - 50px)' }">
                            <div class="content-box" v-for="row in item.starProps" :key="row.id">
                                <span class="content-box-key" :title="row.name">{{row.name&&row.name.length>6?row.name.substring(0,6)+'...' : row.name}}：</span>
                                    <span class="content-box-value">
                                        <!-- rtsp视频流 -->
                                        <template v-if="row.dataType.toLowerCase() === 'rtsp'">
                                            <Button type="primary" size="small" @click="handleAction(row.deviceId)" v-if="util.isNotEmpty(row.value)"> 实时视频 </Button>
                                            <template v-else>-</template>
                                        </template>
                                        <!-- 图片 -->
                                        <template v-else-if="row.dataType === 'base64' || row.dataType === 'image'">
                                            <el-image :src="row.value" :preview-src-list="[row.value]" class="iot-el-img" v-if="util.isNotEmpty(row.value)"></el-image>
                                            <template v-else>-</template>
                                        </template>
                                        <!-- 数字 -->
                                        <template v-else-if="row.dataType === 'int' || row.dataType === 'float'">
                                            <template v-if="util.isNotEmpty(row.value)"> {{ util.getDevicePropValue(row) }}</template>
                                            <template v-else>-</template>
                                        </template>
                                        <!-- 其他、字符串 -->
                                        <template v-else>
                                            <span :title="row.value" v-if="util.isNotEmpty(row.value)">{{ util.getDevicePropValue(row) }}</span>
                                            <template v-else>-</template>
                                        </template>
                                    </span>
                                <span class="content-box-unit">{{row.unit}}</span>
                            </div>
                        </div>
                        <div class="device-content-img" v-if="util.isNotEmpty(item.starCmds)">
                            <Button type="primary" size="small" class="mt-6" v-for="(cmd, cmdIndex) in item.starCmds" :key="cmdIndex" @click="handleCmd(item, cmd)">{{
                                cmd.name && cmd.name.length > 4 ? cmd.name.substring(0, 4) + '...' : cmd.name
                            }}</Button>
                        </div>
                    </div>
                </template>
                <div class="no-device" v-else>
                    <img src="../../assets/svg/icon-no-message.svg" alt="">
                    <p>目前没有设备列表</p>
                </div>
            </div>
        </div>
    </div>    
    <script src="../../config.js"></script>
    <script src="../../assets/js/main.js" type="module"></script>
    <script type="module">
        // 右侧图表页面ID
            const _RIGHT_CHART_PAGE_NAME_ = '设备列表数据面板'
            // 创建Vue实例
            new Vue({
                el: '#app', // 绑定元素
                data: {
                    deviceList:[],
                    pageType: 'device',
                    height: '500px',
                    boxHeight: 110
                },
                mounted() {
                    var result = util.queryUrlParams(location.href)
                    let pageType = util.isNotEmpty(result) ? result['pageType'] : 'device'
                    this.pageType=pageType || 'device'
                    let height = util.isNotEmpty(result) ? result['height'] : '500'
                    this.height = (height||'500')+'px'
                    
                    let deviceType = util.isNotEmpty(result) ? result['deviceType'] : ''
                    this.deviceType = this.getRealValue(deviceType)
                    this.initDeviceList()
                },
                methods: {
                    // 更多
                    handleMore(){
                        let redirectUrl = window.iotWebConfig?.iotUrl +"/#/device/manage"
                            Fuck(
                            "func_html_page",
                            null,
                            "open_url",
                            window.iotWebConfig?.iotUrl +
                            "/#/oauth?username=admin&password=4b78e581bdaffa037a6b11d58bdc934a&redirectUrl="+encodeURIComponent(redirectUrl)
                        );
                    },
					handleAction(deviceId) {
                        console.log(deviceId);
						// 调用定位接口
						Fuck("func_search", null, "focus", deviceId);
					},
                    // 获取设备列表
                    initDeviceList() {
                        let params = {
                            parameters: {
                                deviceType:this.deviceType?this.deviceType.split(','):[]
                            },
                            spec: {
                                propertyInfo: true
                            }
                        }
                        webApi.getDeviceAllPost(params).then(res => {
                            if (res.code === 0) {
                                let list =util.getArrData(res.result)
                                let boxHeight = 80
                                list.forEach(x=>{
                                    x.starProps=x.deviceProperties.filter(x=>!x.star)
                                    if (boxHeight !== 110) {
                                        boxHeight = x.starProps && x.starProps.length > 2 ? 110 : 80
                                    }
                                })
                                this.boxHeight = boxHeight
                                this.deviceList = list
                            }
                        })
                    },
                    getRealValue(val) {
                        return val ? decodeURIComponent(val) : null
                    }
                }
            })
        </script>
</body>

</html>